<template>
  <div class="echarts_box">
    <div class="echarts_box" ref="echarts_box" :style="{ opacity: data.xData.length == 0 ? '0' : '1' }"></div>
    <!---------------------- 无数据时显示 ---------------------->
    <Nodata class="Nodata" v-show="data.xData.length == 0"></Nodata>
  </div>
</template>

<script>
  import fontSize from "@/utils/fontSize";
  // const elementResizeDetectorMaker = require("element-resize-detector");
  export default {
    mounted() { },
    computed: {
      // ...mapGetters(["echartsColor"]),
    },
    watch: {
      color: "drawLine", // 数值变化是更新图表
      yName1: "drawLine", // 数值变化是更新图表
      yName2: "drawLine", // 数值变化是更新图表
      yUnit1: "drawLine", // 数值变化是更新图表
      yUnit2: "drawLine", // 数值变化是更新图表
      barWidth: "drawLine", // 数值变化是更新图表
      legendRight: "drawLine", // 数值变化是更新图表
      barRadius: "drawLine", // 数值变化是更新图表
      data: {
        // 对对象进行深度监听
        handler(nv) {
          this.drawLine();
        },
        immediate: true,
        deep: true,
      },
    },
    props: {
      // color: {
      //   // 传入的颜色
      //   type: Array | Object,
      //   default: function () {
      //     return [];
      //   },
      // },
      color: {
        type: String,
        default: "#3395FF",
      },
      legendRight: {
        type: String,
        default: () => "center",
      },
      yName1: {
        // y轴标题左
        type: String,
        default: "",
      },
      y2Show: {
        // 右y轴是否显示
        type: Boolean,
        default: true,
      },
      yName2: {
        // y轴标题右
        type: String,
        default: "",
      },
      yUnit1: {
        // y轴单位左
        type: String,
        default: "",
      },
      yUnit2: {
        // y轴单位右
        type: String,
        default: "",
      },
      barWidth: {
        //柱状宽度
        type: [String, Number],
        default: 36,
      },
      barRadius: {
        //柱状圆角
        type: [String, Number],
        default: 10,
      },
      data: {
        // 返回的数据
        type: Array | Object,
        default: function () {
          return {
            // xData: ["标题1", "标题2", "标题3", "标题4"],
            // yData: [
            //   { name: "数据", data: [1200, 2100, 1391, 1400] },
            //   { name: "环比", data: [12, 34, 34, 60] },
            // ],
            xData: [],
            yData: [
              { name: "数据", data: [1200, 2100, 1391, 1400] },
              { name: "环比", data: [12, 34, 34, 60] },
            ],
          };
        },
      },
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        try {
          var cw = document.body.clientWidth;
          let gridRight = this.y2Show ? "11%" : "0%";
          this.$nextTick(() => {
            let myChart = this.$echarts.init(this.$refs.echarts_box);
            let option = {
              grid: {
                top: "20%",
                left: "4%",
                right: gridRight,
                bottom: "5%",
                containLabel: true,
              },
              tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(0,74,174,0.9)", //设置背景颜色
                textStyle: {
                  color: "rgba(255,255,255,1)", //设置文字颜色
                  // fontFamily: "PingFang SC",
                  fontSize: fontSize.fontSize(18),
                },
                axisPointer: {
                  type: "line", // 默认为直线，可选为：'line' | 'shadow'
                  label: {
                    show: true,
                  },
                },
              },
              legend: {
                orient: 'vertical',
                top: 'center',
                right: 0,
                // align: 'right',
                textStyle: {
                  color: '#fff',

                  fontSize: fontSize.fontSize(17),
                },
                // right: this.legendRight,
                // // left: 'center',
                // top: "2%",
                // // itemWidth: 5,
                // // itemHeight: 14,
                // icon: "react",
                // // itemGap: 17,

                // align: "left",
                // textStyle: {
                //   color: "rgba(255,255,255,1)",
                //   fontSize: fontSize.fontSize(18),
                //   // fontFamily: "PingFang SC",
                // },
              },
              xAxis: {
                data: this.data.xData,
                axisLine: {
                  show: true,
                  // symbol: ["none", "rect"],
                  // symbolSize: [6, 12],
                  lineStyle: {
                    width: 1,
                    color: "rgba(193,240,254,0.1)",
                  },
                },
                axisTick: {
                  show: false, //隐藏X轴刻度
                },
                axisLabel: {
                  // fontFamily: "PingFang SC",
                  color: "rgba(255,255,255,1)",
                  fontSize: fontSize.fontSize(18),
                },
              },
              yAxis: [
                {
                  // minInterval: 1,
                  type: "value",
                  splitNumber: 3,
                  name: this.yName1,
                  nameTextStyle: {
                    color: "rgba(255,255,255,1)",
                    // fontFamily: "PingFang SC",
                    // fontWeight: 400,
                    fontSize: fontSize.fontSize(18),
                    padding: [0, 40, 0, 0],
                    // verticalAlign: "bottom"
                  },
                  splitLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLine: {
                    show: false,
                    lineStyle: {
                      color: "#FFFFFF",
                    },
                  },
                  axisLabel: {
                    color: "rgba(255,255,255,1)",
                    // fontFamily: "PingFang SC",
                    formatter: `{value} ${this.yUnit1}`, //右侧Y轴文字显示
                    fontSize: fontSize.fontSize(18),
                  },
                },
                {
                  type: "value",
                  splitNumber: 3,
                  name: this.yName2,
                  show: this.y2Show,
                  nameTextStyle: {
                    color: "rgba(255,255,255,1)",
                    // fontFamily: "PingFang SC",
                    // fontWeight: 400,
                    fontSize: fontSize.fontSize(18),
                    padding: [0, 0, 0, 50],
                    // verticalAlign: "bottom"
                  },
                  position: "right",
                  splitLine: {
                    show: true,
                    lineStyle: {
                      color: "rgba(83, 125, 170, 0.2)",
                    },
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLine: {
                    show: false,
                  },
                  axisLabel: {
                    show: true,
                    formatter: `{value} ${this.yUnit2}`, //右侧Y轴文字显示
                    color: "rgba(255,255,255,1)",
                    // fontFamily: "PingFang SC",
                    fontSize: fontSize.fontSize(18),
                  },
                },
              ],
              series: [
                {
                  name: this.data.yData[0].name,
                  type: "bar",
                  barWidth: fontSize.fontSize(this.barWidth),
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: this.color,
                      fontSize: fontSize.fontSize(17),
                    },
                  },
                  itemStyle: {
                    // color: "rgba(9,193,253,1)",
                    normal: {
                      color: new this.$echarts.graphic.LinearGradient(
                        0,
                        1,
                        0,
                        0,
                        [
                          {
                            // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                            // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                            offset: 0,
                            color: this.color,
                          },
                          {
                            offset: 1,
                            color: this.color,
                          },
                        ]
                      ),
                      // barBorderRadius: [this.barRadius, this.barRadius, 0, 0],
                    },
                  },
                  data: this.data.yData[0].data,
                },
                {
                  name: this.data.yData[1].name,
                  type: "line",
                  symbol: "circle",
                  yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                  lineStyle: {
                    color: "#01F8F8",
                    width: 2, //折线宽度
                  },
                  // 展示曲线上的点
                  showSymbol: true,
                  symbolSize: 5,
                  // 让曲线更加圆滑
                  smooth: true,
                  itemStyle: {
                    opacity: 0,
                    normal: {
                      color: "#01F8F8",
                    },
                  },
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "#01F8F8",
                      fontSize: fontSize.fontSize(17),
                    },
                  },
                  data: this.data.yData[1].data,
                },
              ],
            };

            myChart.setOption(option);
            /* 大小自适应 */
            window.addEventListener("resize", () => {
              // h = this.$refs.echarts_box.offsetHeight;
              // console.log(h);
              myChart.resize();
            });
            myChart.resize();
          });
        } catch (e) {
          console.log(e);
          // 错误处理代码片段
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .echarts_box {
    width: 100%;
    height: 100%;
    position: relative;

    .Nodata {
      position: absolute;
      top: 0;
      z-index: 10;
    }
  }
</style>